<template>
    <div style="margin: 10px">
      <div style="display: flex;margin-top: 100px">
        <el-card style="width: 25%;height: 700px">
          <div slot="header" class="clearfix">
            <h2 style="font-size: 20px;color:black ">算法列表</h2>
            <el-button  class="el-icon-circle-plus-outline" @click="addAlgorithmVisible=true;type='algorithm'"
              style="float: right; padding: 3px 0;font-size: 20px" type="text"></el-button>
          </div>
          <el-menu
            :default-active="peopleIndex"
            class="el-menu-vertical-demo"
            style="height:100%; overflow-y: auto"
            active-text-color="rgb(68, 117, 223)"
          >
            <el-menu-item class="elstyle" v-for="item in AlgorithmList" :index="item.id.toString()"  @click="changeAlgorithm(item.id)"
                          :key="item.id">
              <span >{{item.name}}</span>
            </el-menu-item>
          </el-menu>
        </el-card>
        <el-card style="width: 25%;height: 700px;overflow: auto">
          <div slot="header" class="clearfix">
            <h2 style="font-size: 20px;color:black ">配置列表</h2>
            <el-button  class="el-icon-document-add" @click="copyConfig"
                        style="float: right; padding: 3px 0;font-size: 20px;margin-left: 5px" type="text"></el-button>
            <el-button  class="el-icon-circle-plus-outline" @click="addAlgorithmVisible=true;type='config'"
                        style="float: right; padding: 3px 0;font-size: 20px" type="text"></el-button>
          </div>
          <el-menu
            :default-active="peopleIndex"
            class="el-menu-vertical-demo"
            style="height:100%; overflow-y: auto"
            active-text-color="rgb(68, 117, 223)"
          >
            <el-menu-item class="elstyle" v-for="item in AlgorithmConfigList" :key="item.id" :index="item.id.toString()">
              <span >{{item.name}}</span>
            </el-menu-item>
          </el-menu>
        </el-card>
        <el-card style="width: 50%;height: 700px;position: relative">
          <div slot="header">
            <h2 style="font-size: 20px;color:black ">参数配置</h2>
          </div>
          <div style="position: absolute;right:20px;">
            <el-button type="primary" size="mini">保存</el-button>
            <el-button type="primary" size="mini">训练</el-button>
          </div>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="训练" name="first">
              <el-form :label-position="'right'" label-width="80px" style="overflow: auto;height: 500px">
                <el-form-item >
                  <div slot="label">
                    <span>训练地址</span>
                    <el-checkbox></el-checkbox>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item>
                  <div slot="label">
                    <span>数据切割倍数</span>
                    <el-checkbox></el-checkbox>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item>
                  <div slot="label">
                    <span>单元数据长度</span>
                    <el-checkbox></el-checkbox>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item>
                  <div slot="label">
                    <span>采样偏移</span>
                    <el-checkbox></el-checkbox>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item>
                  <div slot="label">
                    <span>训练数据起始位</span>
                    <el-checkbox></el-checkbox>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item>
                  <div slot="label">
                    <span>循环次数</span>
                    <el-checkbox></el-checkbox>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item>
                  <div slot="label">
                    <span>数据偏移量</span>
                    <el-checkbox></el-checkbox>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item>
                  <div slot="label">
                    <span>采样率</span>
                    <el-checkbox></el-checkbox>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="测试" name="second">
              <el-form :label-position="'right'" label-width="80px" style="overflow: auto;height: 500px">
                <el-form-item >
                  <div slot="label">
                    <span>训练地址</span>
                    <el-checkbox></el-checkbox>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item>
                  <div slot="label">
                    <span>数据切割倍数</span>
                    <el-checkbox></el-checkbox>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item>
                  <div slot="label">
                    <span>单元数据长度</span>
                    <el-checkbox></el-checkbox>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item>
                  <div slot="label">
                    <span>采样偏移</span>
                    <el-checkbox></el-checkbox>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item>
                  <div slot="label">
                    <span>训练数据起始位</span>
                    <el-checkbox></el-checkbox>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item>
                  <div slot="label">
                    <span>循环次数</span>
                    <el-checkbox></el-checkbox>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item>
                  <div slot="label">
                    <span>数据偏移量</span>
                    <el-checkbox></el-checkbox>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item>
                  <div slot="label">
                    <span>采样率</span>
                    <el-checkbox></el-checkbox>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="训练参数" name="third">
              <el-form :label-position="'right'" label-width="80px" style="overflow: auto;height: 500px">
                <el-form-item >
                  <div slot="label">
                    <span>训练地址</span>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item>
                  <div slot="label">
                    <span>数据切割倍数</span>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item>
                  <div slot="label">
                    <span>单元数据长度</span>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item>
                  <div slot="label">
                    <span>采样偏移</span>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item>
                  <div slot="label">
                    <span>训练数据起始位</span>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item>
                  <div slot="label">
                    <span>循环次数</span>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item>
                  <div slot="label">
                    <span>数据偏移量</span>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item>
                  <div slot="label">
                    <span>采样率</span>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="测试参数" name="fourth">
              <el-form :label-position="'right'" label-width="80px" style="overflow: auto;height: 500px">
                <el-form-item >
                  <div slot="label">
                    <span>训练地址</span>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item>
                  <div slot="label">
                    <span>数据切割倍数</span>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item>
                  <div slot="label">
                    <span>单元数据长度</span>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item>
                  <div slot="label">
                    <span>采样偏移</span>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item>
                  <div slot="label">
                    <span>训练数据起始位</span>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item>
                  <div slot="label">
                    <span>循环次数</span>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item>
                  <div slot="label">
                    <span>数据偏移量</span>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
                <el-form-item>
                  <div slot="label">
                    <span>采样率</span>
                  </div>
                  <el-input v-model="AlgorithmformItem.name" style="width: 200px"></el-input>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-card>
        <el-dialog
          title="提示"
          :visible.sync="addAlgorithmVisible"
          width="500px"
          center
          :modal-append-to-body="false">
          <label>请输入算法名称</label>
          <el-input v-model="algorithmName" style="width: 200px"></el-input>
          <span slot="footer" class="dialog-footer">
              <el-button @click="addAlgorithm" type="primary">确定</el-button>
              <el-button @click="addAlgorithmVisible = false">取 消</el-button>
              </span>
        </el-dialog>
      </div>

    </div>
</template>

<script>
  export default {
    name: 'AlgorithmConfigCard',
    data(){
      return{
        activeName:'first',
        AlgorithmformItem:{name:100,type:111,region:111},
        addAlgorithmVisible:false,
        type:'algorithm',
        AlgorithmList:[{
          name:'频域算法',
          id:1
        },{
          name:'3D卷积算法',
          id:2
        },{
          name:'神经网络算法',
          id:3
        },{
          name:'通用算法',
          id:4
        }],
        ALLAlgorithmConfigList:[[{
          name:'配置一',
          id:1
        }],
          [{
            name:'配置二',
            id:2
          }],
          [{
            name:'配置三',
            id:3
          }],
          [{
            name:'配置四',
            id:4
          }]],
        AlgorithmConfigList:[{
          name:'配置一',
          id:1,
        }],
        peopleIndex:'',
      }
    },
    methods:{
      changeAlgorithm(index){
          this.AlgorithmConfigList=this.ALLAlgorithmConfigList[index-1]
      },
      addAlgorithm(){
        if(this.type=='algorithm'){
          let a={}
          a.name=this.algorithmName
          a.id=1
          this.AlgorithmList.push(a)
          this.algorithmName=''
          this.addAlgorithmVisible=false
        }else if(this.type='config'){
          let a={}
          a.name=this.algorithmName
          a.id=1
          this.AlgorithmConfigList.push(a)
          this.algorithmName=''
          this.addAlgorithmVisible=false
        }

      },
      copyConfig(){
        this.AlgorithmConfigList.push(this.AlgorithmConfigList[0])
      },
      addConfig(){

        // this.AlgorithmConfigList.push()
      },
    },
    mounted () {
      this.addAlgorithm()
    }
  }
</script>

<style scoped>
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .elstyle{
    height: 35px;
    line-height: 35px;
  }
</style>
<style>
  .el-form-item .el-form-item__label{
    width: 50% !important;
  }
</style>
